import React, { useEffect, useMemo, useRef } from 'react';

const MinDomRender = (props) => {
  const ref = useRef(null);
  const { index, setItemHeight, Item, itemHeight } = props;
  const top = useMemo(() => itemHeight.slice(0, index).reduce((sum, i) => sum + i, 0), [itemHeight, index]);

  useEffect(() => {
    const dom = ref.current;
    if (dom) {
      const height = dom.getBoundingClientRect().height;

      setItemHeight(index, height);
    }
  }, [ref]);
  return Item({ index, style: { position: 'absolute', left: 0, top }, ref, height: itemHeight[index] });
};
export default MinDomRender;
